<template>
	<view class="detail">
		<SRV-topbar title="个人中心" :isLeft="false"></SRV-topbar>
		<view class="head">
            <view class="info">
                <view class="levelInfo" @click="jump(accessToken == ''? 'login' : 'levelInfo', 0)">
                    <image :src="userInfo.levelInfo.levelIcon" mode="widthFix" v-if="userInfo.levelInfo.levelIcon != ''"></image>
                    <view style="width: 30%;">{{userInfo.levelInfo.levelName}}</view>
                    <view style="width: 60%;text-align: right;">{{userInfo.levelInfo.levelNo}}</view>
                </view>
                <view class="userInfo">
                <view class="left_item" @click="jump(accessToken == ''? 'login' : 'vip', 0)">
                    <view class="username">
                        <view>{{userInfo.username}}</view>
                        <image :src="userInfo.levelInfo.vipIcon" mode="widthFix" style="width: 60rpx;height: 60rpx"></image>
                    </view>
                    <view class="username" style="font-size: 36rpx;">{{userInfo.mobile}}</view>
                </view>
                
                <view @click="jump(accessToken == ''? 'login' : 'user_info', 0)">
                    <image :src="userInfo.head_portrait" mode="aspectFill" class="head_portrait"></image>
                </view>
                </view>
            </view>
		</view>
        <view @click="jump(openAdv.jumpType, openAdv.jumpLink)" class="open" v-if="openAdv.isShow">
            <image :src="openAdv.cover" mode="widthFix"></image>
        </view>
        <view class="drawLi" v-for="(tip, i) in tipList" :key="i" @click="jump(tip.jumpType, tip.jumpLink)">
            <view>{{tip.title}}</view>
            <view>点击领取</view>
        </view>
		<view class="heng"></view>
		<view class="topnav">
			<view class="navTitle">我的资产
                <text style="position: absolute;right: 20rpx;" @click="jump('online_recharge')">充值</text>
            </view>
            <view class="list">
                <view class="item" @click="jump('credits_list', 'user_money')">
                	<image src="https://hdsq.aoorange.cn/attachment/icon/money.png" mode=""></image>
                	<text>{{userInfo.account.user_money}}</text>
                	<text>余额</text>
                </view>
                <!-- <view class="item" @click="jump('credits_list', 'user_integral')">
                	<image src="https://hdsq.aoorange.cn/attachment/icon/integral.png" mode=""></image>
                	<text>{{userInfo.account.user_integral}}</text>
                	<text>互动券</text>
                </view> -->
                <view class="item" @click="jump('credits_list', 'cz_qian_one')">
                	<image src="https://hdsq.aoorange.cn/attachment/icon/dun1.png" mode=""></image>
                	<text>{{userInfo.account.cz_qian_one}}</text>
                	<text>囤陈一</text>
                </view>
                <view class="item" @click="jump('credits_list', 'cz_qian_three')">
                	<image src="https://hdsq.aoorange.cn/attachment/icon/dun3.png" mode=""></image>
                	<text>{{userInfo.account.cz_qian_three}}</text>
                	<text>囤陈三</text>
                </view>
                <view class="item" @click="jump('credits_list', 'cz_val')">
                	<image src="https://hdsq.aoorange.cn/attachment/icon/czval.png" mode=""></image>
                	<text>{{userInfo.account.cz_val}}</text>
                	<text>超圳通</text>
                </view>
                <!-- <view class="item" @click="jump('credits_list', 'cz_gxz')">
                	<image src="https://hdsq.aoorange.cn/attachment/icon/gxz.png" mode=""></image>
                	<text>{{userInfo.account.cz_gxz}}</text>
                	<text>贡献值</text>
                </view> -->
               <!-- <view class="item"  @click="jump('account_more')">
                	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/my_more.png" mode=""></image>
                    <text style="color: #ffffff;">0</text>
                	<text>更多</text>
                </view> -->
            </view>
		</view>
		<view class="heng"></view>
		<view class="topnav">
			<view class="navTitle">我的订单
		        <text style="position: absolute;right: 20rpx;" @click="jump('my_order_list', 'status=0')">全部</text>
		    </view>
		    <view class="list">
                <view class="item" @click="jump('my_order_list', 'status=0')">
                	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_alll.png" mode=""></image>
                	<text>全部</text>
                </view>
		        <view class="item" @click="jump('my_order_list', 'status=1')">
		        	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_wait_pay.png" mode=""></image>
		        	<text>待付款</text>
		        </view>
		        <view class="item" @click="jump('my_order_list', 'status=2')">
		        	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_wait_delivery.png" mode=""></image>
		        	<text>待发货</text>
		        </view>
		        <view class="item" @click="jump('my_order_list', 'status=3')">
		        	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_wait_task.png" mode=""></image>
		        	<text>待签收</text>
		        </view>
		        <!-- <view class="item" @click="jump('my_order_list', 'status=4')">
		        	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_task.png" mode=""></image>
		        	<text>已签收</text>
		        </view> -->
                <view class="item" @click="jump('my_order_list', 'status=4')">
                	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_wait_pickup.png" mode=""></image>
                	<text>待自提</text>
                </view>
                <!-- <view class="item" @click="jump('my_order_list', 'status=6')">
                	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_pickup_ing.png" mode=""></image>
                	<text>自提中</text>
                </view>
                <view class="item" @click="jump('my_order_list', 'status=7')">
                	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_pickup_finish.png" mode=""></image>
                	<text>已自提</text>
                </view> -->
		        <view class="item" @click="jump('my_order_list', 'status=5')">
		        	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_finish.png" mode=""></image>
		        	<text>已完成</text>
		        </view>
		        <!-- <view class="item" @click="jump('my_order_list', 'status=9')">
		        	<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/order_cancel.png" mode=""></image>
		        	<text>已取消</text>
		        </view> -->
		    </view>
		</view>
        <view class="heng"></view>
        <view class="topnav" v-if="userInfo.storeRole.oneStore || userInfo.storeRole.batchStore || userInfo.storeRole.threeStore">
        	<view class="navTitle">商城中心</view>
            <view class="list">
                <view class="item" v-if="userInfo.storeRole.oneStore" @click="jump('storeOne')">
                    <image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/icon/store_three.png" mode="scaleToFill"></image>
                    <text>品鉴云仓</text>
                </view>
                <view class="item" v-if="userInfo.storeRole.threeStore" @click="jump('storeThree')">
                    <image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/icon/store_one.png" mode="scaleToFill"></image>
                    <text>臻品云仓</text>
                </view>
                <view class="item" v-if="userInfo.storeRole.batchStore" @click="jump('storeBatch')">
                    <image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/icon/store_batch.png" mode="scaleToFill"></image>
                    <text>批发云仓</text>
                </view>
            </view>
        </view> 
		<view class="heng"></view>
		<view class="topnav">
			<view class="navTitle">业务中心</view>
            <view class="list">
                <view class="item"  v-if="userInfo.storeRole.recommend" @click="jump('recommend')">
                    <image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/icon/tui.png" mode="scaleToFill"></image>
                    <text>推荐商家</text>
                </view>
                <view class="item" v-if="userInfo.storeRole.myStore > 0" @click="jump(userInfo.storeRole.myStore == 1 ? 'inner_detail' : 'inner_list', userInfo.merchantId)">
                    <image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/icon/dian.png" mode="scaleToFill"></image>
                    <text>我的店铺</text>
                </view>
                <view class="item"  v-if="userInfo.storeRole.invite" @click="jump('invite')">
                    <image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/icon/yao.png" mode="scaleToFill"></image>
                    <text>我的邀请</text>
                </view>
                <view class="item"  @click="jump('my_coupon')" v-if="false">
                	<image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/coupon.png" mode="scaleToFill"></image>
                	<text>我的优惠券</text>
                </view>
            </view>
		</view> 
		<view class="heng"></view>
		<view class="topnav">
			<view class="navTitle">附属功能</view>
            <view class="list">
                
                <view class="item" @click="jump('address')">
                	<image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/address.png" mode="scaleToFill"></image>
                	<text>收货地址</text>
                </view>
                <!-- <view class="item" @click="jump('gift')">
                	<image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/gift.png" mode="scaleToFill"></image>
                	<text>我的赠品</text>
                </view> -->
                <view class="item" @click="jump('collect')">
                	<image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/collection.png" mode="scaleToFill"></image>
                	<text>我的收藏</text>
                </view>
                <button class="item" style="background: #ffffff;" open-type="contact">
                	<image lazy-load="true" style="margin-top: 10rpx; margin-bottom: 0px;" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/customer-service.png" mode="scaleToFill"></image>
                	<text>客服</text>
                </button>
                <view class="item" @click="jump('agreement', 'about')">
                	<image lazy-load="true" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/about.png" mode="scaleToFill"></image>
                	<text>关于我们</text>
                </view>
            </view>
		</view>
		<button v-if="accessToken != ''" type="default" @click="logout()" >登出</button>
		<view class="heng"></view>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	// import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
                accessToken: '',
				userInfo: {
					username : '点击登录',
					mobile: '',
					head_portrait: 'https://hdsq.aoorange.cn/attachment/profile_small.jpg',
                    warehouseId: 0,
					is_vip : 0,
					vip_end_time: '',
                    role : 0,
                    roleName: '',
                    warehouseStatus: false,
                    businessStatus: false,
                    merchantStatus: false,
					warehouseInfo: {
                        id: 0,
                        title: '',
                        is_switch: false,
                    },
                    account: {
                        user_money: 0.00, //余额
                        user_integral: 0, //互动券
                        petty_cash: 0.00, //积分
                        green_bean: 0, //活跃度
                        yellow_bean: 0,
                        cz_qian_three: 0,
                        cz_qian_one: 0,
                        cz_gxz: 0,
                    },
                    levelInfo: {
                        levelIcon: '',
                        levelName: '游客',
                        levelNo: '0000000000'
                    },
                    storeRole:{batchStore: 0, judgeStore: 0},
                    orderNum: [0,0,0,0]
				},
                openAdv: {
                    title: '',
                    cover: '',
                    jumpType: '',
                    jumpLink: '',
                    isShow: false,
                },
                tipList: [],
			}
		},
		methods: {
			triggerFun(val) {
				if(val == 1) {
					common.jump('store_order_list');
				}
				if(val == 2) {
					common.jump('lobby_order_list');
				}
				if(val == 3) {
					common.jump('take_order_list');
				}
				if(val == 4) {
					common.jump('pay_order_list');
				}
				return false;
			},
			getUserInfo() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				serve.request({
					url: '/member/member/index',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': _self.accessToken,
					},
                    v: '/v3',
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						_self.userInfo = res.data;
                        _self.getOpenAdv();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						});
						if (res.code == 199) {
							_self.jump('login');
							return;
						}
					}
                    _self.$forceUpdate();
				});
			},
			logout() {
				uni.setStorageSync('access-token', '');
				uni.setStorageSync('parentKey', '');
				uni.setStorageSync('is_logout', true);
				_self.accessToken = '';
				_self.userInfo = {
					username : '点击登录',
					head_portrait: 'https://hdsq.aoorange.cn/attachment/profile_small.jpg',
					warehouseId: 0,
					is_vip : 0,
					vip_end_time: '',
                    role : 0,
                    roleName: '',
                    warehouseStatus: false,
                    businessStatus: false,
                    merchantStatus: false,
					warehouseInfo: {
					    id: 0,
					    title: '',
						is_switch: false,
					},
                    levelInfo: {
                        levelIcon: '',
                        levelName: '游客',
                        levelNo: '0000000000'
                    },
					account: {
					    user_money: 0.00, //余额
					    user_integral: 0, //互动券
					    petty_cash: 0.00, //积分
					    green_bean: 0, //活跃度
                        yellow_bean: 0,
                        cz_qian_three: 0,
                        cz_qian_one: 0,
					},
				};
				_self.$forceUpdate();
			},
			switchFun() {
				serve.request({
				    url: '/member/member/switch',
				    data: {
				        appkey: uni.getStorageSync('appkey'),
				        'access-token': uni.getStorageSync('access-token'),
				    },
				    v: '/v2',
				}).then(res => {
					uni.setStorageSync('parentKey', '');
					_self.parentKey = '';
				    _self.getInfo();
				});
			},
            getOpenAdv() {
                serve.request({
                    url: '/store/draw/index',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    _self.openAdv = res.data;
                    // _self.getDrawInfo();
                });
            },
            getDrawInfo() {
                serve.request({
                    url: '/store/draw/check-draw',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    if(res.data.state == 1) {
                        this.tipList = res.data.list;
                    }
                });
            },
			jump(jump_type, jump_link) {
				if (this.accessToken == '') {
					common.jump('login');
					return ;
				}
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
            _self = this;
		},
		onShow() {
			this.accessToken = uni.getStorageSync('access-token');
            console.info(uni.getStorageSync('access-token'));
			if (this.accessToken != '') {
				this.getUserInfo();
			} else {
				Object.assign(this.$data, this.$options.data())
			}
		},
		onPullDownRefresh() {
            _self.openAdv = {};
            _self.tipList = [];
			_self.getUserInfo();
		}
	}
</script>

<style lang="scss" scoped>
    uni-modal .uni-modal__bd{      
        white-space: pre-wrap;      
    }
	.detail {
		width: 100%;
		padding-bottom: 140rpx;
		color: rgba(102, 102, 102, 1);
		
		.top {
			position: fixed;
			z-index: 10;
			width: 100%;
			height: 100rpx;
			background: #3939FD;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;

			.top_img {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 46rpx;
				height: 46rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.dot {
					width: 14rpx;
					height: 14rpx;
					background: rgba(235, 89, 56, 1);
					border-radius: 50%;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
        
		.info {
            margin: 16rpx;
            border-radius: 20rpx;
            background-color: #efefef;
            
            
            .left_item {
                align-items: center;
                font-size: 50rpx;
                font-weight: bold;
                color: #333333;

                .username {
                    max-width: 340rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 42rpx;
                    display: flex;
                    align-content: center; 
                    align-items: center;
                }
            }
            
            .role {
                border: 1rpx #FFBC00 solid;
                border-radius: 10rpx;
                padding: 8rpx;
                color: #FFBC00;    
                margin-right: 20rpx;
            }
            
            .levelInfo {
                display: flex;
                align-items: center;
                box-sizing: border-box;
                margin: 4rpx;
                padding: 20rpx 6rpx;
                border-bottom: 2px solid #a9a7a7;
                image {
                    width: 50rpx;
                    height: 50rpx;
                    margin-right: 20rpx;
                }
            }
            
            .userInfo {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 30rpx;
            }

            .left_item1 {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                margin-top: 50rpx;
            
                image {
                    width: 62rpx;
                    height: 46rpx;
                }
            
                text {
                    margin-left: 9rpx;
                    margin-right: 26rpx;
                }
            }

			.head_portrait {
                width: 150rpx;
                height: 150rpx;
                border-radius: 50%;
			}

		}
        
        .open {
            image {
                width: 100%;
                height: auto;
                border-radius: 10upx;
            }
        }

		.info2 {
			display: flex;
			box-sizing: border-box;
			padding: 54rpx 60rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 20rpx rgba(247, 247, 247, 1) solid;

			.left {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 60rpx;
				font-weight: bold;
				color: rgba(255, 95, 96, 1);

				text:last-child {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}

				.left_con {
					display: flex;
					align-items: center;
                    text{
						color: #333333;
						font-size: 28rpx;
					}
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
				color: #999999;

				text {
					width: 200rpx;
					height: 64rpx;
					line-height: 60rpx;
					text-align: center;
					background: #E0E0E0;
					border-radius: 32rpx;
				}

				text:last-child {
					background: #FFFFFF;
					border: 2rpx solid #EB5938;
					margin-top: 24rpx;
					color: #EB5938;
				}
			}

			.right1 {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				font-size: 28rpx;

				.right1_txt {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: rgba(153, 153, 153, 1);

					text:last-child {
						color: rgba(255, 95, 96, 1);
						margin-top: 11rpx;
					}
				}
			}
		}

		.heng {
			height: 20rpx;
			width: 100%;
			background: rgba(247, 247, 247, 1);
		}

		.info3 {
			display: flex;
			box-sizing: border-box;
			padding: 37rpx 30rpx 37rpx 0rpx;
			border-bottom: 1rpx rgba(53, 63, 110, 0.06) solid;
			margin-left: 30rpx;
			justify-content: space-between;
			color: rgba(102, 102, 102, 1);

			.item:last-child {
				position: relative;
				font-weight: 400;
				padding-right: 25rpx;
			}

			.item:last-child:after {
				position: absolute;
				right: 0rpx;
				top: 13rpx;
				content: '';
				border: 1rpx solid rgba(57, 72, 107, 0.5);
				border-width: 0 3rpx 3rpx 0;
				padding: 6rpx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}

			.item {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.nav {
			display: flex;
			box-sizing: border-box;
			padding: 50rpx 39rpx;
			border-bottom: 20rpx rgba(247, 247, 247, 1) solid;
			justify-content: space-between;

			.item {
				position: relative;
				image {
					width: 106rpx;
					height: 87rpx;
				}
                .item_num{
                	top: -10rpx;
                	right: 20rpx;
                	position: absolute;
                	color: #FFFFFF;
                	font-size: 20rpx;
                	width:20rpx;
                	height:20rpx;
                	background:rgba(235,89,56,1);
                	border-radius:50%;
                	display: flex;
                	justify-content: center;
                	align-items: center;
                	padding: 5rpx;
                }
			}
		}

		.bot {
			width:600rpx;
			height:100rpx;
			line-height: 100rpx;
			font-size: #999999;
			font-size: 32rpx;
			background:rgba(224,224,224,0.6);
			border-radius:50px;
			text-align: center;
			margin: 78rpx 76rpx;
		}
        .rightjt{
			position: relative;
		}
		.line {
			position: relative;
			display: flex;
			box-sizing: border-box;
			padding: 48rpx 33rpx;
			align-items: center;
			font-size: 28rpx;
			border-bottom: 1rpx rgba(235, 235, 235, 1) solid;
			font-size: 28rpx;
			color: rgba(102, 102, 102, 0.9);

			image {
				height: 50rpx;
				width: 43rpx;
				margin-right: 30rpx;
			}
			.upgrade{			
				color: #EB5938;
				font-size: 28rpx;
				position: absolute;
				right: 50rpx;
			}
			.integral{
				color: #EB5938;
				font-size: 32rpx;
				position: absolute;
				right: 30rpx;
				font-weight: bold;
			}
		}

		.contact {
			background: white;
			height: 130rpx;
			width: 100%;
			box-sizing: border-box;
		}

		.contact::after {
			position: absolute;
			width: 12rpx;
			height: 12rpx;
			right: 33rpx;
			left: auto;
			top: 65rpx;
			content: '';
			border: 1rpx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3rpx 3rpx 0;
			padding: 6rpx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			box-sizing: border-box;
		}

		.rightjt::after {
			position: absolute;
			right: 33rpx;
			top: 65rpx;
			content: '';
			border: 1rpx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3rpx 3rpx 0;
			padding: 6rpx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}

		.model {
			position: fixed;
			left: 15rpx;
			top: 200rpx;
			width: 720rpx;
			background: rgba(255, 249, 249, 1);
			border-radius: 20rpx;
			color: #666666;

			.model_title {
				padding-top: 64rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.model_txt {
				padding: 115rpx 75rpx 120rpx;
				font-size: 32rpx;
				white-space: pre-line;
				line-height: 54rpx;
			}

			.model_bot {
				width: 520rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 36rpx;
				color: #FFFFFF;
				margin: 0rpx 100rpx 98rpx;
				background: rgba(255, 95, 96, 1);
				border-radius: 50rpx;
			}
		}
	
		.topnav {
			display: flex;
			box-sizing: border-box;
			flex-wrap: wrap;
			width: 100%;
			.navTitle {
				padding: 30rpx;
                width: 100%;
                font-size: 36rpx;
                border-bottom: 1rpx solid #eee;
			}
			.list {
				display: flex;
                width: 100%;
                align-items: center;
                // margin: 30rpx 10rpx;
                flex-wrap: wrap;
                flex-direction: row;
                .item {
                    width: 24%;
                    color: #23345B;
                    font-size: 24rpx;
                    padding: 10rpx 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                        
                    image {
                    	width: 100rpx;
                    	height: 100rpx;
                    	// margin-bottom: 20rpx;
                    }
                }
			}
		}
        .drawLi {
            display: flex;
            margin: 20rpx;
            justify-content: space-between;
            animation: glow 800ms ease-out infinite alternate;
            padding: 10rpx;
        }
        
        @keyframes glow {
            0% {
                box-shadow: 0 0 5rpx rgba(252, 94, 94, .2), inset 0 0 5px rgba(252, 94, 94, .1), 0 1rpx 0 #d70c19;
            }
            100% {
                border-color: #d70c19;
                box-shadow: 0 0 5rpx rgba(252, 94, 94, .6), inset 0 0 10px rgba(252, 94, 94, .4), 0 1rpx 0 #d70c19;
            }
        }
		text{
			font-size: 32rpx;
		}
	}
</style>
